<template>
	<view>
		---------------表单学习-----------------
		<view class="out">
			<form @submit="sub">
				<view class="row">
					<view class="title">姓名</view>
					<input class="border" type="text" name="username" placeholder="请输入姓名"/>
				</view>
				<view class="row">
					<view class="title">留言</view>
					<textarea class="border" name="content" placeholder="请输入留言"></textarea>
				</view>
				<view class="row">
					<view class="title">性别</view>
					<radio-group name="gender">
						<radio value="1">男</radio>
						<radio value="2">女</radio>
						<radio value="0" checked>未知</radio>
					</radio-group>
				</view>
				<view class="row">
						<picker :range="educationList" name="education" :value="educationIndex"  @change="bindEducation">
							<view>选择学历:{{educationList[educationIndex]}}</view>
						</picker>
				</view>
				<view class="row">
					<picker mode="multiSelector" 
						name="nativeSpace" 
						@change="selCity"
						@columnchange="selMonitor"
						:value="cityList"
						:range="address"
					>
						<view>选择籍贯:{{ addressNode.province }} {{ addressNode.city ? ','+ addressNode.city : '' }}</view>
					</picker>
				</view>
				<view class="row">
					<picker mode="date"
						name="birthday"
						:value="birthday"
						:start="startDate" :end="endDate"
						 @change="bindBirthday"
					>
						选择出生日期：{{birthday}}
					</picker>
				</view>
				<view class="row">
					<button form-type="submit" type="primary">提交</button>
					<button form-type="reset">重置</button>
				</view>
			</form>
			{{obj}}
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				obj:null,
				// 学历
				educationList:["小学","初中","高中","大学"],
				educationIndex:0,
				//籍贯
				nativeSpaceList:[
					{
						"id":"1","name":"河北","children":[
							{"id":"11","name":"石家庄"},
							{"id":"12","name":"保定"},
							{"id":"13","name":"唐山"},
							{"id":"14","name":"廊坊"},
						]
					},
					{
						"id":"2","name":"辽宁","children":[
							{"id":"21","name":"沈阳"},
							{"id":"22","name":"大连"},
							{"id":"23","name":"葫芦岛"},
							{"id":"24","name":"鞍山"},
						]
					}
				],
				cityAllList:[],
				cityList:[],
				addressNode:{},
				//出生日期
				birthday:''
			};
		},
		methods:{
			sub(e){
				this.obj = e.detail.value;
			},
			bindEducation(e){
				this.educationIndex = e.detail.value
			},
			bindBirthday(e){
				this.birthday = e.detail.value
			},
			// 监听省市区滚动
			selMonitor(e) {
				let column = e.detail.column
				if (column == 0) {
					let index = e.detail.value
					let length = this.address[1].length
					// 改变市
					this.address[1].splice(0,length, ...this.cityAllList[index])
				}
			},
			// 选择省市 -- 获取地址信息
			selCity(e) {
				let val = e.target.value
				this.cityList = val
				this.addressNode = {
					province: this.address[0][this.cityList[0]],
					city: this.address[1][this.cityList[1]]
				}
			},
			
			/**
			 * 日期方法
			 */
			getDate(type) {
				const date = new Date();
				let year = date.getFullYear();
				let month = date.getMonth() + 1;
				let day = date.getDate();
	
				if (type === 'start') {
					year = year - 60;
				} else if (type === 'end') {
					year = year + 2;
				}
				month = month > 9 ? month : '0' + month;
				day = day > 9 ? day : '0' + day;
				return `${year}-${month}-${day}`;
			}
			
		},
		computed:{
			startDate() {
				return this.getDate('start');
			},
			endDate() {
				return this.getDate('end');
			},
			address(){
				let nativeSpaceList = this.nativeSpaceList;
				// 所有城市列表,二维数组
				let cityAllList = [];
				// 省列表
				let provinceList = [];
				// nativeSpaceList为省市区的json数据
				for (let key in nativeSpaceList) {
					let newDataList = [];
					if (nativeSpaceList[key].children) {
						for (let key2 in nativeSpaceList[key].children) {
							newDataList.push(nativeSpaceList[key].children[key2].name);
						}
					}
					provinceList.push(nativeSpaceList[key].name);
					cityAllList.push(newDataList);
				}
				// that.provinceList = provinceList;
				this.cityAllList = cityAllList;
				return [provinceList, cityAllList[0]];
			}
		}
	}
</script>

<style lang="scss">
.out{
	padding: 30rpx;
	.row{
		margin-bottom: 10rpx;
		.title{
			padding: 20rpx 0;
		}
	}
	.border{
		border:1px solid #eee;
		width: 100%;
		padding: 0 20rpx;
		box-sizing: border-box;
		min-height: 80rpx;
	}
}
</style>
